<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->
<head>
    <title>订单列表</title>
</head>
<body>
<div layout:fragment="content">
    <div class="card">
        <div class="card-body">
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var query_url = "/order/query.do";
    $(document).ready(function () {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        });


        $(document).on('click', 'th input:checkbox', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        });

        $(grid_selector).jqGrid({
            url: query_url,
            datatype: "json",
            mtype: 'post',
            height: '100%',
            colNames: ['id', '订单编号', '域名', '用户', '电影', '状态', '金额', '创建时间'],
            colModel: [{
                name: 'id',
                index: 'id',
                key: true,
                editable: false,
                hidden: true
            }, {
                name: 'code',
                index: 'code',
                align: 'center',
                search: true,
            }, {
                name: 'site_name',
                index: 'siteName',
                align: 'center',
                search: true,
            }, {
                name: 'username',
                index: 'username',
                search: true,
                sortable: false,
                align: 'center',
            },
                {
                    name: 'movie_name',
                    index: 'movieName',
                    search: true,
                    align: 'center'
                }, {
                    name: 'caption',
                    index: 'caption',
                    align: 'center',
                    search: true,
                }, {
                    name: 'price',
                    index: 'price',
                    align: 'center',
                    search: true,
                    summaryType:'sum',
                    summaryTpl:'<b>共计: {0}元</b>',
                     formatter:'number'
                 },{
                    name: 'create_time',
                    index: 'createTime',
                    fixed: true,
                    search: true,
                    resize: false,
                    align: 'center',
                    editable:false,formatter:"date",formatoptions: {srcformat:'u',newformat:'Y-m-d H:i:s'}
                }],
            rowNum: 20,
            rowList: [20, 30, 50],
            pager: pager_selector,
            altRows: true,
            grouping:true,
            groupingView :{
                groupField : ['site_name'], //分组字段
                groupColumnShow :[true],//分组的列是否显示
                groupText : ['{0} - {1}部电影'],
                groupSummary : [true],//是否显示汇总  如果为true需要在colModel中进行配置summaryType:'max',summaryTpl:'<b>Max: {0}</b>'
                //分组标题，{0}代表的是组名，{1}代表的是本组的总数，同时设置这个属性可以使组名字体加粗
            },
            gridview: true,
            multiselect: true,
            pgbuttons: true,
            multiboxonly: true,
            footerrow: true,//分页上添加一行，用于显示统计信息
            loadComplete: function () {
                $(grid_selector).closest(".ui-jqgrid-bdiv").css({'overflow-x': 'hidden'});
            },
            beforeProcessing:beforeProcessingFun,
            caption: "订单列表",
            autowidth: true

        });
        $(window).triggerHandler('resize.jqGrid'); // trigger window resize
//navButtons
        $(grid_selector).jqGrid('navGrid', pager_selector, {
            del: false,
            add: false,
            edit: false,
            search: true
        }, {}, {}, {}, {multipleSearch: true});
        function beforeProcessingFun(data, st, xhr) {
            var money = data.money;
            console.log("data："+data)
            $(this).footerData("set",{"comm":"合计","price":money});  //根据你上面所写出对应的格式比如comm 对应最下面显示的就是合计
        }
    });
</script>